<template>
<div>
  <div :id="chartsId" :style="{width: '900px', height: '500px'}" class="my-chart"></div>
  <h4>销量top地区榜</h4>
  <el-table
      :data="tableData"
      style="width: 900px">
      <el-table-column
        v-for="col in cols"
        :prop="col.prop"
        :label="col.label"
        :key="col.key"
        width="180"
        >
      </el-table-column>
    </el-table>
    <h4>销量top车系榜</h4>
    <el-table
      :data="models"
      style="width: 900px">
      <el-table-column
        v-for="col in cols"
        :prop="col.prop1"
        :label="col.label"
        :key="col.key"
        width="180">
      </el-table-column>
    </el-table>
</div>
</template>

<style lang="scss" scoped>
div{
    margin: 30px 0;
}
</style>

<script>
export default {
  props: ['chartsId','keyName','data', 'brandName', 'value0', 'value1'],
  data(){
      return {
          cols: [],
          tableData: [],
          models:[]
        }
  },
  watch: {
      data(){
          console.log('diyige', this.data);
        //品牌名称
        let brandNames,benpin,jingpin1,jingpin2,jingpin3,jingpin4;
              console.log('this.value1: ', this.value1);
          if(this.value1.length){
            brandNames = this.brandName;
            benpin = 'benpin' + this.value0;
            jingpin1 = 'jingpin' + this.value1[0];
            jingpin2 = 'jingpin' + this.value1[1];
            jingpin3 = 'jingpin' + this.value1[2];
            jingpin4 = 'jingpin' + this.value1[3];
          }else{
            brandNames = this.data.brandName
            benpin = this.data.demo[0];
            jingpin1 = this.data.demo[1];
            jingpin2 = this.data.demo[2];
            jingpin3 = this.data.demo[3];
            jingpin4 = this.data.demo[4];
          }
          //把品牌名称赋值给tabel
          if(1){
            if(1){
                let arr = [];
                for(let i = 1; i <= brandNames.length; i++){
                    let obj = {};
                    let province = 'province' + i;
                    let model = 'model' + i;
                    obj.prop = province;
                    obj.prop1 = model;
                    obj.label = brandNames[i-1];
                    obj.key = i;
                    arr.push(obj);
                }
                this.cols = arr;
            }
          }
          
          let top10 = this.data.brandSalesProvinceTop10;//top地区榜
          let data = this.data.brandSalesQ;//折线图数据
          
          this.desc();
          if(this.data.brandSalesQ){
            let brandSalesProvinceTop10,tbenpin,tjingpin1,tjingpin2,tjingpin3,tjingpin4;
              //销售top地区榜
              brandSalesProvinceTop10 = this.data.brandSalesProvinceTop10;
              if(!this.value1.length){//默认数据赋值
                tbenpin = this.data.demo[0];
                tjingpin1 = this.data.demo[1];
                tjingpin2 = this.data.demo[2];
                tjingpin3 = this.data.demo[3];
                tjingpin4 = this.data.demo[4];
              }else{
                tbenpin = 'benpin' + this.value0;
              }
              //整理转化数据
              let arr = [];
              for(let i = 0;i < 10;i++){
                let obj = {};
                obj.province1 = brandSalesProvinceTop10[tbenpin][i] || '--';
                //默认数据
                if(!this.value1.length){
                    obj.province2 = brandSalesProvinceTop10[tjingpin1][i] || '--';
                    obj.province3 = brandSalesProvinceTop10[tjingpin2][i] || '--';
                    obj.province4 = brandSalesProvinceTop10[tjingpin3][i] || '--';
                    obj.province5 = brandSalesProvinceTop10[tjingpin4][i] || '--';
                }
                //用户选择的数据
                if(this.value1.length>=1){
                    tjingpin1 = 'jingpin' + this.value1[0];
                    obj.province2 = brandSalesProvinceTop10[tjingpin1][i] || '--';
                }
                if(this.value1.length>=2){
                    tjingpin2 = 'jingpin' + this.value1[1];
                    obj.province3 = brandSalesProvinceTop10[tjingpin2][i] || '--';
                }
                if(this.value1.length>=3){
                    tjingpin3 = 'jingpin' + this.value1[2];
                    obj.province4 = brandSalesProvinceTop10[tjingpin3][i] || '--';
                }
                if(this.value1.length>=4){
                    tjingpin4 = 'jingpin' + this.value1[3];
                    obj.province5 = brandSalesProvinceTop10[tjingpin4][i] || '--';
                }
                arr.push(obj);
              }
              this.tableData = arr;
          }
          if(this.data.brandSalesQ){
            let brandSalesSeriesTop5,tbenpin,tjingpin1,tjingpin2,tjingpin3,tjingpin4;
              //销量top车系榜
              brandSalesSeriesTop5 = this.data.brandSalesSeriesTop5;
              if(!this.value1.length){//默认数据赋值
                tbenpin = this.data.demo[0];
                tjingpin1 = this.data.demo[1];
                tjingpin2 = this.data.demo[2];
                tjingpin3 = this.data.demo[3];
                tjingpin4 = this.data.demo[4];
              }else{
                tbenpin = 'benpin' + this.value0;
              }
              //整理转化数据
              let arr = [];
              for(let i = 0;i < 5;i++){
                let obj = {};
                obj.model1 = brandSalesSeriesTop5[tbenpin][i] || '--';
                //默认数据
                if(!this.value1.length){
                    obj.model2 = brandSalesSeriesTop5[tjingpin1][i] || '--';
                    obj.model3 = brandSalesSeriesTop5[tjingpin2][i] || '--';
                    obj.model4 = brandSalesSeriesTop5[tjingpin3][i] || '--';
                    obj.model5 = brandSalesSeriesTop5[tjingpin4][i] || '--';
                }
                //用户选择的数据
                if(this.value1.length>=1){
                    tjingpin1 = 'jingpin' + this.value1[0];
                    obj.model2 = brandSalesSeriesTop5[tjingpin1][i] || '--';
                }
                if(this.value1.length>=2){
                    tjingpin2 = 'jingpin' + this.value1[1];
                    obj.model3 = brandSalesSeriesTop5[tjingpin2][i] || '--';
                }
                if(this.value1.length>=3){
                    tjingpin3 = 'jingpin' + this.value1[2];
                    obj.model4 = brandSalesSeriesTop5[tjingpin3][i] || '--';
                }
                if(this.value1.length>=4){
                    tjingpin4 = 'jingpin' + this.value1[3];
                    obj.model5 = brandSalesSeriesTop5[tjingpin4][i] || '--';
                }
                arr.push(obj);
              }
              this.models = arr;
          }
      }
  },
  mounted(){
      // this.desc();
  },
  methods: {
      desc(){
          let self = this;
          let brandNames,data,benpin,jingpin1,jingpin2,jingpin3,jingpin4;
          if(this.data.brandSalesQ){
              brandNames = this.brandName;
              data = this.data.brandSalesQ;
              benpin = 'benpin' + this.value0;
              jingpin1 = 'jingpin' + this.value1[0];
              jingpin2 = 'jingpin' + this.value1[1];
              jingpin3 = 'jingpin' + this.value1[2];
              jingpin4 = 'jingpin' + this.value1[3];
          }
          
          let myChart5 = this.$echarts.init(document.getElementById(this.chartsId));
          myChart5.setOption({
            title: {
                text: this.keyName
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[]
            },
            dataZoom: [
              {
                type: 'slider',
                show: true, 
                height: 30, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                bottom:20,
                startValue: 12,
                endValue:24
              },
              {
                type: 'inside', 
                show: true, 
                height: 15, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                startValue: 12,
                endValue:24
              }
            ],
            grid: {
                bottom: 100,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.data.brandSalesQ.date,
                axisLabel: {
                  interval: 0,
                  rotate: -30
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                  formatter: '{value} %'
              }
            },
            series: [
                {
										type:'line',
										name: brandNames[0],
										data: data[benpin],
                    stack: '总量1',
                },
                {
										type:'line',
										name: brandNames[1],
										data: data[jingpin1],
                    stack: '总量2',
                },
                {
										type:'line',
										name: brandNames[2],
										data: data[jingpin2],
                    stack: '总量3',
                },
                {
										type:'line',
										name: brandNames[3],
										data: data[jingpin3],
                    stack: '总量4',
                },
                {
										type:'line',
										name: brandNames[4],
										data: data[jingpin4],
                    stack: '总量5',
                }
            ]
        })
      }
  }
}
</script>
